<template>
	<Layout class="p-5 bg-white">
		<Form >
			<h1 style="text-align: center;margin: 20px;">卖房信息修改</h1>
	 <div class="content">
		<div class="width1190">		
			<form action="#" style="margin-left: 200px;" method="get" class="pro-search">
				<table>
					<tbody>
						<tr>
							<th>省份：</th>
							<td>  
									<a href="javascript:;"><input @click="searchCity()"
												type="radio" name="provienceId" id="provienceId_0" value="0"
												checked="checked" v-model="house.provienceId" />
											<label for="provienceId_0">不限</label>
										</a>
										<a href="javascript:;" v-for="p in proviences"><input @click="searchCity(p.srId)" type="radio"
												name="provienceId" :id='"provienceId_"+p.srId' :value='p.srId'
												v-model="house.provienceId" />
											<label :for='"provienceId_"+p.srId'>{{p.name}}</label></a>
							</td>
						</tr>
						<tr>
							<th>城市：</th>
							<td>
								<a href="javascript:;">
									<input @click="searchRegin()" type="radio" name="cityId" id="cityId_0"
										value="0" checked="checked" v-model="house.cityId" />
									<label for="cityId_0">不限</label>
								</a>
								<a href="javascript:;" v-for="c in citys">
									<input @click="searchRegin(c.srId)" type="radio" name="cityId" :id='"cityId_"+c.srId'
										:value='c.srId' v-model="house.cityId" />
									<label :for='"cityId_"+c.srId'>{{c.name}}</label>
								</a>
							</td>
						</tr>
						<tr>
							<th>区域：</th>
							<td>
								<a href="javascript:;">
									<input type="radio" name="reignId" id="reignId_0"
										value="0" checked="checked" v-model="house.reignId" />
									<label for="reignId_0">不限</label>
								</a>
								<a href="javascript:;" v-for="r in regins">
									<input type="radio" name="reignId" :id='"reignIdId_"+r.srId'
										:value='r.srId' v-model="house.reignId" />
									<label :for='"reignIdId_"+r.srId'>{{r.name}}</label>
								</a>
							</td>
						</tr>
						<tr>
							<th>商圈：</th>
							<td>
									<Input v-model="house.pianqu" style="width:150px" placeholder="请输入商圈"></Input>
							</td>
						</tr>
						<tr>
							<th>小区：</th>
							<td>
									<Input v-model="house.xiaoqu" style="width:150px" placeholder="请输入小区/散盘"></Input>(非必填)
							</td>
						</tr>
						<tr>
							<th>户型：</th>
							<td>
								<a href="javascript:;" v-for="item in roomCounts">
									<input @click="ss(item)"  type="radio" name="roomCount"  :id="'roomCount_' + item.value " :value="item.value"  :key="item.value"  v-model="house.roomCount" />
									<label :for="'roomCount_' + item.value">{{ item.label }}</label>
								</a>
							</td>
						</tr>
						<tr>
							<th>楼层：</th>
							<td>
								<a href="javascript:;" v-for="item in floors">
									<input @click="ss(item)"  type="radio" name="floor"  :id="'floor_' + item.value " :value="item.value"  :key="item.value"  v-model="house.louceng" />
									<label :for="'floor_' + item.value">{{ item.label }}</label>
								</a>
							</td>
						</tr>
						<tr>
							<th>朝向：</th>
							<td>
								<a href="javascript:;" v-for="item in faces">
									<input @click="ss(item)"  type="radio" name="face"  :id="'face_' + item.value " :value="item.value"  :key="item.value"  v-model="house.chaoxiang" />
									<label :for="'face_' + item.value">{{ item.label }}</label>
								</a>
							</td>
						</tr>
						<tr>
							<th>产权：</th>
							<td>
								<a href="javascript:;" v-for="item in propertTypes">
									<input @click="ss(item)"  type="radio" name="propertType"  :id="'propertType_' + item.value " :value="item.value"  :key="item.value"  v-model="house.propertType" />
									<label :for="'propertType_' + item.value">{{ item.label }}</label>
								</a>
							</td>
						</tr>
						<tr>
							<th>装修：</th>
							<td>
								<a href="javascript:;" v-for="item in repairs">
									<input @click="ss(item)"  type="radio" name="repair"  :id="'repair_' + item.value " :value="item.value"  :key="item.value"  v-model="house.zhuangxiu" />
									<label :for="'repair_' + item.value">{{ item.label }}</label>
								</a>
							</td>
						</tr>
						<tr>
							<th>电梯：</th>
							<td>
								<a href="javascript:;" v-for="item in lifts">
									<input @click="ss(item)"  type="radio" name="lift"  :id="'lift_' + item.value " :value="item.value"  :key="item.value"  v-model="house.dianti" />
									<label :for="'lift_' + item.value">{{ item.label }}</label>
								</a>
							</td>
						</tr>
						<tr>
							<th>价格：</th>
							<td>
								<a href="javascript:;">
									<Input v-model="house.totalPrice" style="width:300px" placeholder="请输入总价">
									    <span slot="append">元</span>
									</Input>
								</a>
							</td>
						</tr>
						<tr>
							<th>面积：</th>
							<td>
								<a href="javascript:;">
									<Input v-model="house.area" style="width:300px" placeholder="请输入面积">
									    <span slot="append">m²</span>
									</Input>
								</a>
							</td>
						</tr>
						<tr>
							<th>产权年限：</th>
							<td>
								<a href="javascript:;">
									<Input v-model="house.propertYear" style="width:300px" placeholder="请输入产权年限">

									</Input>
								</a>
							</td>
						</tr>
						<tr>
							<th>建筑年代：</th>
							<td>
								<a href="javascript:;">
									<Input v-model="house.niandai" style="width:300px" placeholder="请输入建筑年代">
									    <span slot="append">年</span>
									</Input>
								</a>
							</td>
						</tr>
						<tr>
							<th>电话号码：</th>
							<td>
								<a href="javascript:;">
									<Input v-model="house.tel" style="width:300px" placeholder="请输入电话号码">
									</Input>
								</a>
							</td>
						</tr>
						<tr>
							<th>微信号：</th>
							<td>
								<a href="javascript:;">
									<Input v-model="house.wxNumber" style="width:300px" placeholder="请输入微信号">(非必填)
									</Input>
								</a>
							</td>
						</tr>
						<tr>
							<th>标题图片:</th>
							<td>
								<div v-if="house.imgUrl != ''">
								  <img
								    :src="house.imgUrl"
								    style="width:180px;height:120px"
								  />
								  <div class="demo-upload-list-cover">
								    <Icon
								      type="ios-trash-outline"
								      @click.native="handleRemove"
								    ></Icon>
								  </div>
								</div>
								<Upload
								  with-credentials
								  :max-size="2048"
								  :show-upload-list="false"
								  name="file"
								  ref="upload"
								  :format="['jpg', 'jpeg', 'png']"
								  :data="{ module: 'house', date: new Date() }"
								  :on-format-error="handleFormatError"
								  :on-exceeded-size="handleMaxSize"
								  :on-success="handleSuccess"
								  :action="url"
								>
								  <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
								    >上传</Button
								  >
								</Upload>
							</td>
						</tr>
						<tr>
							<th>多图片上传:</th>
							<td>
								<div v-if="imgUrlList != ''" v-for="(item,index) in imgUrlList" :key="index">
								  <img
								    :src="imgUrlList[index].imgUrl"
								    style="width:180px;height:120px;display: inline-block;"
								  />
								  <div class="demo-upload-list-cover">
								    <Icon
								      type="ios-trash-outline"
								      @click.native="handleListRemove()"
								    ></Icon>
									
								  </div>
								</div>
								<Upload
								  with-credentials
								  :max-size="2048"
								  :show-upload-list="false"
								  name="file"
								  ref="upload"
								  multiple
								  type="drag"
								  :format="['jpg', 'jpeg', 'png']"
								  :data="{ module: 'house', date: new Date() }"
								  :on-format-error="handleFormatError"
								  :on-exceeded-size="handleMaxSize"
								  :on-success="handleListSuccess"
								  :action="url"
								   style="display: inline-block;width:58px;"
								>
								  <div style="width: 58px;height:58px;line-height: 58px;">
								              <Icon type="ios-camera" size="20"></Icon>
								          </div>
								</Upload>
							</td>
						</tr>
					    <tr>
					    	<th></th>
					    	<td>
					    		<Button @click="submit" type="primary" style="margin-right: 100px;">提交</Button>
					    		<Button @click="cancel" class="ml-2">取消</Button>
					    	</td>
					    </tr>
						
					</tbody>
				</table>		
			</form>	
		</div>			
	</div>				
		 
		</Form>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
				url:'',
				iport:'',
				proviences : [],
				citys : [],
				regins : [],
				modal11: false,
				roomCount:'',
				floor:'',
				face:'',
				repair:'',
				lift:'',
				currentUser:{},
				imgUrlList:[],
				imgList:[],
				img:'',
				imgs:'',
				house: {
					sellId:'',//卖房Id
					des: "",//描述
					area: "",//面积
					hallCount: "",//厅数
					roomCount:null,//室数
					provienceId : '0',
					cityId:'0',
					reignId:'0',
					imgUrl: "",//图片地址
					louceng:'',//楼层
					chaoxiang:'',//朝向
					zhuangxiu:'',//装修
					dianti:null,//电梯
					xiaoqu:'',//小区
					pianqu:'',//商圈
					tel:'',//电话
					wxNumber:'',//微信
					totalPrice: "",//总价
					niandai:"",//建筑年代
					propertType: null,//产权类型
					detailLocation: "",//详细地址
					propertYear:'',//产权年限
					clientId: '',
				},
				houseSell: {
					unitPrice: "",
					totalPrice: "",
					propertYear: "",
					clientId: 0,
					ct: "",
					ut: ""
				},
				propertTypes: [
					{
						value: 1,
						label: '军产'
					},
					{
						value: 2,
						label: '国产'
					},
					{
						value: 3,
						label: '地产'
					},
					{
						value: 4,
						label: '公寓'
					},
					{
						value: 5,
						label: '公建'
					},
					{
						value: 6,
						label: '商铺'
					},
				],
				roomCounts:[
					{value:1,label:'一室'},
					{value:2,label:'二室'},
					{value:3,label:'三室'},
					{value:4,label:'四室'},
					{value:5,label:'五室以上'},
					{value:6,label:'上跃'},
					{value:7,label:'下跃'},
					{value:8,label:'别墅'}
				],
				floors:[
					{value:'高',label:'高'},
					{value:'中',label:'中'},
					{value:'低',label:'低'},
					{value:'多层',label:'多层'},
					{value:'小高层',label:'小高层'},
					{value:'高层',label:'高层'},
				],
				faces:[
					{value:'南北',label:'南北'},
					{value:'东西',label:'东西'},
					{value:'其他',label:'其他'}
				],
				repairs:[
					{value:'清水',label:'清水'},
					{value:'简装',label:'简装'},
					{value:'精装',label:'精装'},
					{value:'豪装',label:'豪装'}
				],
				lifts:[
					{value:1,label:'有'},
					{value:2,label:'无'}
				]
			}
		},
		methods: {
			//图片上传时文件格式错误方法
			handleFormatError(file) {
			  this.$Notice.warning({
			    title: '文件格式不正确',
			    desc:
			      '文件 ' +
			      file.name +
			      ' 格式不正确，请上传 jpg 或 png 或 jpeg格式的图片。',
			  })
			},
			//校验图片的大小，不能大于2M
			handleMaxSize: function(file) {
			  this.$Modal.info({
			    title: '超出文件大小限制',
			    content: '文件 ' + file.name + ' 太大，不能超过 2M。',
			  })
			},
			handleRemove(file) {
			  // 从 upload 实例删除数据 
			  this.$data.house.imgUrl = ''
			},
			//上传成功后的勾子 
			handleSuccess: function(response, file, fileList) {
				
			  this.$data.house.imgUrl = response.DATA.URL
			  console.log( this.$data.house.imgUrl)
			},
			handleListRemove(file) {
			  // 从 upload 实例删除数据 
			  this.$data.imgUrlList = []
			},
			//上传成功后的勾子 
			handleListSuccess: function(response, file, fileList) {
				this.$data.imgs = response.DATA.URL
			  var img = {}
			  img.houseId = this.$data.house.sellId
			  img.imgUrl = this.$data.imgs
			  console.log(img)
			  this.$data.imgUrlList.unshift(img)
			  
			  // this.$data.imgUrlList.carId = this.$data.car.carId
			  // this.$data.imgUrlList.imgUrl = response.DATA.URL
			  console.log( this.$data.imgUrlList)
			},
			
			ss:function(item){
				console.log(this.house)
			},
			searchRegin : function(srId){
				this.house.cityId = srId
				this.house.reignId = "0";
				if(!srId){
					this.regins = [];
					this.house.cityId = "0";
					this.house.reignId = "0";
				}
				else{
					let self = this
					this.http.get({
						url : "/sys-region/list",
						param : {
							parentId : srId
						}
					}).then(data => {
						self.$data.regins = data;
					})
				}
			},
			searchReginI(srId){
				let self = this
				this.http.get({
					url : "/sys-region/list",
					param : {
						parentId : srId
					}
				}).then(data => {
					self.$data.regins = data;
				})
			},
			searchCity : function(srId){
				this.house.provienceId = srId
				this.regins = [];
				this.house.cityId = "0";
				this.house.reignId = "0";
				if(!srId){
					this.citys = [];
					this.house.provienceId = "0";
					this.house.cityId = "0";
					this.house.reignId = "0";
				}
				else {
					let self = this
					this.http.get({
						url : "/sys-region/list",
						param : {
							parentId : srId
						}
					}).then(data => {
						self.$data.citys = data
					});
				}
			},
			searchCityI(srId){
				let self = this
				this.http.get({
					url : "/sys-region/list",
					param : {
						parentId : srId
					}
				}).then(data => {
					self.$data.citys = data
				});
			},
			searchProvience : function(){
				let self = this
				this.http.get({
					url : "/sys-region/list",
					param : {
						parentId :0
					}
				}).then(data => {
					self.$data.proviences = data;
				});
			},
			getHouseList:function(){
				this.http.get({
					url:'/house-sell-client-vo/info',
					param:{ sellId:this.$data.house.sellId }
				}).then((data) => {
					this.$data.house = data
					this.searchCityI(data.provienceId)
					this.searchReginI(data.cityId)
					console.log(data)
				})
			},
			
			
			
			submit: function() {
        if(this.$data.house.tel === ""){
          this.message.error("电话必须输入");
          return;
        }
				let self = this;
				this.cancelImg()
				this.http.put({
					url: "house-sell-client-vo/info",
					param: {
						sellId:this.$data.house.sellId,
						des: this.$data.house.des,
						area: this.$data.house.area,
						hallCount:this.$data.house.hallCount,
						roomCount:this.$data.house.roomCount,
						provienceId:this.$data.house.provienceId,
						cityId:this.$data.house.cityId,
						reignId: this.$data.house.reignId,
						imgUrl:this.$data.house.imgUrl,
						louceng:this.$data.house.louceng,
						chaoxiang:this.$data.house.chaoxiang,
						zhuangxiu:this.$data.house.zhuangxiu,
						dianti:this.$data.house.dianti,
						xiaoqu:this.$data.house.xiaoqu,
						pianqu:this.$data.house.pianqu,
						tel:this.$data.house.tel,
						wxNumber:this.$data.house.wxNumber,
						totalPrice: this.$data.house.totalPrice,
						propertType: this.$data.house.propertType,
						detailLocation: this.$data.house.detailLocation,
						propertYear:this.$data.house.propertYear,
						niandai:this.$data.house.niandai,
						clientId: this.$data.house.clientId,
					}
				}).then(data => {
					self.message.info("修改成功");
					this.updataImg()
					this.cancel()
				});
			},
			cancel: function() {
				this.$router.push({
					name: "user_center_fang_sale",
				});
			},
			updataImg: function(){
				var imgs = []
				for(var i = 0;i<this.$data.imgUrlList.length;i++){
					imgs.unshift(this.$data.imgUrlList[i].imgUrl)
				}
				var imgString = imgs.toString()
				this.http.put({
					url:'/house/image/upload',
					param:{
						sellAndLeaseId:this.$data.house.sellId,
						type:1,
						images:imgString
					}
				}).then(data => {
					console.log("shangchuanl")
				})
			},
			searchImg:function(){
				this.http.get({
					url:'/house/image/list',
					param:{
						houseAndLeaseId:this.$data.house.sellId,
						type:1,
					}
				}).then(data => {
					this.$data.imgUrlList = data
					console.log(data)
				})
			},
			cancelImg:function(){
				this.http.delete({
					url:'/house/image/remove',
					param:{
						houseAndLeaseId:this.$data.house.sellId,
						type:1,
					}
				}).then(data => {
					
					console.log("55")
				})
			},
		},
		created: function() {
			this.$data.currentUser = JSON.parse(sessionStorage.getItem('CURRENT'))
			this.$data.house.clientId = this.$data.currentUser.client.clientId
			this.$data.house.sellId = this.$route.params.sellId
			this.iport = this.store.state.iport
			this.url = this.iport + 'image/upload'
			this.getHouseList()
			
			this.searchProvience();
			this.searchImg()
			// var cli = this.local.session.getItem("CURRENT");
			// this.houseSell.clientId = cli.client.clientId;
		},
		beforeRouteLeave(to, from, next) {
		    this.$destroy();//手动销毁当前页面
		    next();
		},
	}
</script>

<style >
</style>
